html,
body{
	/* background-color: rgb(15,15,17); */
	background-color: rgb(15, 15, 17);

}

.page {
	background-color: rgb(15, 15, 17);
}

.contentWrap {
	padding-bottom: 120px;
}

#logWrap {}

.placeholder {
	color: #ffff;
}

.shine {
	animation-name: shine;
	animation-duration: 0.2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;

}

/* 动画代码 */
@keyframes shine {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.logItem {
	color: rgb(246, 246, 246);
}

.maskwrap {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgb(15, 15, 17);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.sockeetTip{
	color: #fff;
	padding-bottom: 30px;
}
.maskwrap h1 {
	position: relative;
	margin: auto;
	font-size: calc(20px + 5vw);
	font-weight: bold;
	color: #fff;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-shadow: 0 0 10px blue;
	user-select: none;
	white-space: nowrap;
	filter: blur(0.007em);
	animation: shake 2.5s linear infinite;
}

.maskwrap h1 span {
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
	clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
}

h1::before,
h1::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
}

h1::before {
	animation: crack1 2.5s linear forwards;
	clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
}

h1::after {
	animation: crack2 2.5s linear forwards;
	clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
}

@keyframes shake {

	5%,
	15%,
	25%,
	35%,
	55%,
	65%,
	75%,
	95% {
		filter: blur(0.018em);
		transform: translateY(0.018em) rotate(0deg);
	}

	10%,
	30%,
	40%,
	50%,
	70%,
	80%,
	90% {
		filter: blur(0.01em);
		transform: translateY(-0.018em) rotate(0deg);
	}

	20%,
	60% {
		filter: blur(0.03em);
		transform: translate(-0.018em, 0.018em) rotate(0deg);
	}

	45%,
	85% {
		filter: blur(0.03em);
		transform: translate(0.018em, -0.018em) rotate(0deg);
	}

	100% {
		filter: blur(0.007em);
		transform: translate(0) rotate(-0.5deg);
	}
}

@keyframes crack1 {

	0%,
	95% {
		transform: translate(-50%, -50%);
	}

	100% {
		transform: translate(-51%, -48%);
	}
}

@keyframes crack2 {

	0%,
	95% {
		transform: translate(-50%, -50%);
	}

	100% {
		transform: translate(-49%, -53%);
	}
}
